<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="pd-30" v-if="Object.keys(dealCaseDetailData).length > 0">
			<view class="card1 flex pd-20" style="align-items: flex-start;">
				<view class="img">
					<image class="img" mode="aspectFill" :src="dealCaseDetailData.product_info.cover"></image>
				</view>
				<view class="right ml-20 mt-10">
					<view class="ft1">{{
		     dealCaseDetailData.product_info.name
		    }}</view>
					<view class="btn flex-center mt-20" @click="goProjectDetail( dealCaseDetailData.product_info.id)">
						<text class="ft">查看商品</text>
						<image class="wh-24 ml-12" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
					</view>
				</view>
			</view>
			<view class="case mt-30">
				<view class="caseItem pd-20">
					<view class="ft1">
						{{ "案例信息" }}
					</view>
					<view class="pd-20 case-main" :class="{active:isShow}">
						<view class="flex ft c-99" style="align-items: flex-start;">
							<view style="flex-shrink: 0;">订购时间：</view>
							<view class="ft c-33">{{ dealCaseDetailData.order_time }}</view>
						</view>
						<view class="flex ft c-99 mt-20" style="align-items: flex-start;">
							<view style="flex-shrink: 0;">交付时间：</view>
							<view class="ft c-33">{{ dealCaseDetailData.deliver_time }}</view>
						</view>
						<view class="flex ft c-99 mt-20" style="align-items: flex-start;">
							<view style="flex-shrink: 0;">办理结果：</view>
							<view class="ft c-33">{{ dealCaseDetailData.handle_result }}</view>
						</view>
						<view class="flex ft c-99 mt-20" style="align-items: flex-start;">
							<view style="flex-shrink: 0;">办理周期：</view>
							<view class="ft c-33">{{ dealCaseDetailData.handle_cycle }}</view>
						</view>
						<view class="flex ft c-99 mt-20" style="align-items: flex-start;">
							<view style="flex-shrink: 0;">客户条件：</view>
							<view class="ft c-33">
								{{ !isShow?dealCaseDetailData.customer_condition:(dealCaseDetailData.customer_condition.substring(0,20)+(dealCaseDetailData.customer_condition.length>20?'...':'')) }}
							</view>
						</view>
					</view>
					<view class="watch ft c-33 flex-center" @click="openL" v-if="isShow">
						<text>{{ "展开更多" }}</text>
						<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_down.png"></image>
					</view>
					<view class="watch ft c-33 flex-center" @click="closeL" v-else>
						<text>{{ "收起" }}</text>
						<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"></image>
					</view>
				</view>
			</view>
		
		
			<view class="card2 mt-30 pd-20" v-if="dealCaseDetailData.images && dealCaseDetailData.images.length>0">
				<view class="ft1">
					{{ "案例图片" }}
				</view>
				<view class="imgGroup flex">
					<view v-for="(img,index) in dealCaseDetailData.images" :key="index">
						<image mode="aspectFill" class="group" v-if="index<4 || !isShow1" :src="img" @click="handlePreview(index,dealCaseDetailData.images)"></image>
					</view>
				</view>
				<view class="watch ft c-33 flex-center" @click="openL1" v-if="isShow1">
					<text>{{ "展开更多" }}</text>
					<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_down.png"></image>
				</view>
				<view class="watch ft c-33 flex-center" @click="closeL1" v-else>
					<text>{{ "收起" }}</text>
					<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_top.png"></image>
				</view>
			</view>
		
			<view class="card3 mt-30 pd-20" v-if="dealCaseDetailData.process.length>0">
				<view class="ft1 mb-20">
					{{ "案例过程时间轴" }}
				</view>
				<view class="process-list">
					<view class="process-item" v-for="(item, index) in dealCaseDetailData.process" :key="index">
						<view class="flex" style="align-items: stretch;justify-content: space-between;">
							<view class="l">
								<view class="flex-center" style="width:16rpx;height: 34rpx;">
									<view class="radius"></view>
								</view>
								<view class="line"></view>
							</view>
							<view class="r">
								<view class="">
									<view class="ft fw-800 c-33">{{ item.time_str }}</view>
									<view class="time ft mt-20 flex-center">{{ '历时'+item.day+'天' }}</view>
									<view class="desc ft c-66 mt-20">
										{{ item.content }}
									</view>
									<view class="imgGroup flex mt-20 "
										style="width: 624rpx;overflow: hidden;position: relative;">
										<view class="group" v-for="(img,index) in item.images" :key="index"
											@click="handlePreview(index,item.images)">
											<image class="wh-100" mode="aspectFill" :src="img"></image>
											<view class="img-count flex-center">{{item.images.length}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="flex-center mt-60">
				<view class="flex" v-if="isConllect==0" @click="conllectCase">
					<image class="wh-28" src="https://cdn.oss.bon-top.cn/static_bc/images/collect.png"></image>
					<text class="ft">收藏</text>
				</view>
				<view class="flex" v-if="isConllect==1" @click="cancelConllectCase">
					<image class="wh-28" src="https://cdn.oss.bon-top.cn/static_bc/images/collect.png"></image>
					<text class="ft">已收藏</text>
				</view>
				<view class="share flex ml-30">
					<image class="wh-28" src="https://cdn.oss.bon-top.cn/static_bc/images/shareIcon.png"></image>
					<text class="ft">分享</text>
					<!-- 隐藏的原生分享按钮 -->
					<button open-type="share" class="hidden-share-btn" @click="triggerShare"></button>
				</view>
			</view>
			
		</view>	
	</view>
</template>

<script setup>
	import {
		onLoad,		
		onShareAppMessage,
		onShareTimeline,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted
	} from "vue";
	import {
		utils
	} from '@/utils/utils.js';
	import {
		api
	} from '@/utils/api.js';
	
	import navHead from '@/components/navHead.vue';
	const headData = reactive({
		color: '#fff',
		title: '案例详情'
	})

	const id = ref(null)
	
	//是否收藏
	const isConllect = ref(0)
	const conllectCase = () => {
		utils
			.request(
				api.collect, {
					case_id: dealCaseDetailData.value.id,
				},
				"post"
			)
			.then((res) => {
				isConllect.value = 1
			});
	}
	const cancelConllectCase = () => {
		utils
			.request(
				api.cancelCollect, {
					case_id: dealCaseDetailData.value.id,
				},
				"post"
			)
			.then((res) => {
				isConllect.value = 0
			});
	}

	const dealCaseDetailData = ref({})

	const getDetailData = (id) => {
		utils.request(api.getDealCaseDetail, {
			id: id
		}, 'get').then((res) => {
			dealCaseDetailData.value = res.data.info;
			isConllect.value = res.data.info.is_conllect
		})
	}

	const het = ref('418rpx')

	const isShow = ref(true)
	const openL = () => {
		isShow.value = false;
		het.value = '536rpx'
	}
	const closeL = () => {
		isShow.value = true;
		het.value = '506rpx'
	}

	const isShow1 = ref(true)
	const openL1 = () => {
		isShow1.value = false;

	}
	const closeL1 = () => {
		isShow1.value = true;

	}

	const goProjectDetail = (id) => {
		uni.navigateTo({
			url: `/subpackage/immigration/immigration?id=${id}`,
		});
	};
	
	const share_user_id = ref('')
	const timestemp = ref('')
	onLoad((options) => {
		startTime.value = Math.floor(Date.now() / 1000)
		share_user_id.value = options.share_user_id ? options.share_user_id : ''
		timestemp.value = options.timestemp ? options.timestemp : ''
		if (options.id) {
			id.value = options.id;
			getDetailData(options.id)
		}
		
		initShareParams()
	})

	const handlePreview = (index,imgList = []) => {
		uni.previewImage({
			current: index,
			urls: imgList
		});
	}
	
	
	// 响应式分享配置
	const shareConfig = ref({
		title: '',
		path: '',
		imageUrl: '',
		queryParams: {} // 当前页面参数
	})
	
	// 获取页面栈实例
	const currentPages = getCurrentPages()
	const currentRoute = currentPages[currentPages.length - 1]
	
	// 初始化分享参数
	const initShareParams = () => {
		// 获取当前页面参数
		const query = currentRoute.options || {}
		if (!query.share_user_id) {
			const userInfo = uni.getStorageSync("userInfo")
			query.share_user_id = userInfo ? userInfo.id : ''
			query.timestemp = Math.floor(Date.now() / 1000);
		}
	
		const queryString = Object.keys(query)
			.map(key => `${key}=${query[key]}`)
			.join('&')
	
		// 更新分享配置
		shareConfig.value = {
			...shareConfig.value,
			path: `${currentRoute.route}?${queryString}`,
			queryParams: query
		}
	}
	
	// 触发分享操作
	const triggerShare = () => {
		initShareParams()
	}
	
	// 好友分享配置
	onShareAppMessage(() => ({
		title: shareConfig.value.title,
		path: shareConfig.value.path,
		imageUrl: shareConfig.value.imageUrl,
		success(res) {
			uni.$emit('shareSuccess', {
				type: 'friend',
				data: shareConfig.value.queryParams
			})
		}
	}))
	
	// 朋友圈分享配置（需基础库2.11.3+）
	onShareTimeline(() => ({
		title: shareConfig.value.title,
		query: shareConfig.value.path.split('?') || '',
		imageUrl: shareConfig.value.imageUrl
	}))
	
	const startTime = ref(0)
	const duration = ref(0)	
	onUnload(() => {
	  duration.value = Math.floor(Date.now() / 1000) - startTime.value
	  if(share_user_id.value && timestemp.value && uni.getStorageSync("userInfo")){
		  utils
		  	.request(
		  		api.shareVisit, {
					share_user_id:share_user_id.value,
					timestemp:timestemp.value,
					seconds:Math.round(duration.value / 1000),
		  			case_id: id.value,
		  		},
		  		"post"
		  	)
		  	.then((res) => {
		  		
		  	});
	  }
	})
</script>

<style lang="scss" scoped>
	.detail {
		width: 100%;
		overflow-x: hidden;
	}

	.card1 {
		width: 690rpx;
		background: #f8f8f8;
		border-radius: 40rpx;

		.img {
			width: 142rpx;
			height: 174rpx;
			border-radius: 40rpx;
		}

		.btn {
			width: 170rpx;
			height: 54rpx;
			background: #ffffff;
			border-radius: 20rpx;
		}
	}


	.card2 {
		width: 690rpx;
		// height: 566rpx;
		background: #f8f8f8;
		border-radius: 40rpx;

		.watch {
			//border: 2rpx solid red;
			width: 650rpx;
			height: 74rpx;
			background: linear-gradient(180deg,
					rgba(255, 255, 255, 0) 0%,
					#ffffff 100%);
			border-radius: 0rpx 0rpx 40rpx 40rpx;
		}

		.imgGroup {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			width: 680rpx;

			.group {
				width: 148rpx;
				height: 186rpx;
				margin-right: 20rpx;
				margin-top: 20rpx;
				border-radius: 40rpx;
			}
		}
	}

	.case {
		.caseItem {
			width: 690rpx;
			//height: 506rpx;
			background: #f8f8f8;
			border-radius: 40rpx;
			border: 1rpx solid #f8f8f8;

			.case-main {
				background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
				border-radius: 40rpx;
				box-sizing: border-box;
				// max-height: 324rpx;
				// overflow: hidden;
			}

			.case-main.active {
				max-height: unset;
			}

			.group {
				width: 148rpx;
				height: 186rpx;
				border-radius: 40rpx;
			}

			.watch {
				width: 650rpx;
				height: 74rpx;
				background: linear-gradient(180deg,
						rgba(255, 255, 255, 0) 0%,
						#ffffff 100%);
				border-radius: 0rpx 0rpx 40rpx 40rpx;
			}

			.avtor {
				border-radius: 50%;
			}

			.nameplate {
				width: 88rpx;
				height: 36rpx;
				background: #333333;
				border-radius: 8rpx;
				line-height: 36rpx;
			}

			.tcard {
				padding-left: 20rpx;
				padding-right: 20rpx;
				height: 58rpx;
				background: #F1F1F1;
				border-radius: 34rpx;
			}
		}
	}

	.card3 {
		width: 690rpx;
		//height: 956rpx;
		background: #F8F8F8;
		border-radius: 40rpx;

		.time {
			width: 140rpx;
			height: 58rpx;
			background: #FFFFFF;
			border-radius: 34rpx;
			border: 2rpx solid #DBF046;
		}

		.group {
			width: 142rpx;
			height: 178rpx;
			border-radius: 40rpx;
			overflow: hidden;
			position: relative;
			flex-shrink: 0;
			margin-right: 18rpx;

			.img-count {
				display: none;
			}
		}

		.imgGroup {
			.group:nth-child(4) {
				.img-count {
					display: flex;
					width: 54rpx;
					height: 52rpx;
					// background: #F8F8F8;
					background: rgba(248, 248, 248, 0.3);
					border-radius: 26rpx;
					font-weight: 800;
					font-size: 22rpx;
					color: #333333;
					position: absolute;
					bottom: 10rpx;
					right: 10rpx;
					z-index: 2;
					backdrop-filter: blur(30rpx);
					-webkit-backdrop-filter: blur(30rpx);
				}
			}
		}
	}

	.process-list {
		.process-item {
			.l {
				display: flex;
				flex-direction: column;
				align-items: center;

				.radius {
					width: 16rpx;
					height: 16rpx;
					background: #333333;
					border-radius: 50%;
					flex-shrink: 0;
				}

				.line {
					height: 100%;
					width: 2rpx;
					background-color: #F1F1F1;
				}
			}

			.r {
				width: 624rpx;
				padding-bottom: 60rpx;
			}
		}

		.process-item:first-child {
			margin-top: 0rpx;
		}

		.process-item:last-child {
			.r {
				padding-bottom: 0;
			}
		}
	}
	
	.share{
		position: relative;
		.hidden-share-btn{
			opacity: 0;
			position: absolute;
			width: 100%;
			height: 100%;
			left:0;
			top:0;
		}
	}	
</style>